<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="入库订单号" prop="warehousing_id">
        <el-input
          v-model="queryParams.warehousing_id"
          placeholder="请输入入库订单号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="商品名称" prop="goods_name">
        <el-input
          v-model="queryParams.goods_name"
          placeholder="请输入商品名称"
          clearable
          size="small"
        />
      </el-form-item>
<!--      <el-form-item label="托盘、箱片号">-->
<!--        <el-input-->
<!--          v-model="queryParams.arbitrary_code"-->
<!--          placeholder="请输入托盘、箱片号"-->
<!--          clearable-->
<!--          size="small"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="操作时间">
        <el-date-picker
          v-model="queryParams.created_at"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="订单类型">
        <el-select v-model="queryParams.order_type" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exporting"
          @click="handleExport"
        >{{ exporting ? '导出中...' : '导出' }}</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="list">
      <el-table-column type="selection" align="center" width="50" />
      <el-table-column prop="id" label="ID" align="center" />
      <el-table-column prop="order_pid" label="订单ID" align="center" />
      <el-table-column prop="order_id" label="子订单ID" align="center" />

      <el-table-column label="订单类型" align="center">

        <template slot-scope="scope">

          <el-tag v-if="scope.row.order_type === 1">{{ scope.row.order_type_text }}</el-tag>
          <el-tag v-else-if="scope.row.order_type === 2" type="success">{{ scope.row.order_type_text }}</el-tag>
          <el-tag v-else-if="scope.row.order_type === 3" type="info">{{ scope.row.order_type_text }}</el-tag>
          <el-tag v-else-if="scope.row.order_type === 4" type="warning">{{ scope.row.order_type_text }}</el-tag>
          <el-tag v-else-if="scope.row.order_type === 5" type="danger">{{ scope.row.order_type_text }}</el-tag>

          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>

      </el-table-column>

      <el-table-column prop="goods_name" label="商品料号" align="center" />
      <el-table-column prop="packing_specification" label="包装规格" align="center" />
      <el-table-column prop="tray_number" label="托盘数量" align="center" />
      <el-table-column prop="box_number" label="箱数" align="center" />
      <el-table-column prop="number" label="数量" align="center" />
      <el-table-column prop="warehousing_id" label="库存入库订单号" align="center" :show-overflow-tooltip="true" />
      <el-table-column min-width="200" prop="stock_id" label="库存编号" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="tray_id" label="托盘码" align="center" :show-overflow-tooltip="true" />
<!--      <el-table-column prop="box_id" label="箱号" align="center">-->
<!--        <template slot-scope="scope">-->
<!--          <el-tooltip v-if="scope.row.box_id" placement="top">-->
<!--            <div slot="content">-->
<!--              <span v-for="(item,index) in scope.row.box_id.split(',')" :key="index">-->
<!--                {{ item }}<br>-->
<!--              </span>-->
<!--            </div>-->
<!--            <el-button>查看</el-button>-->
<!--          </el-tooltip>-->
<!--        </template>-->
<!--      </el-table-column>-->

<!--      <el-table-column prop="slice_id" label="片号" align="center">-->
<!--        <template slot-scope="scope">-->
<!--          <el-tooltip v-if="scope.row.slice_id" placement="top">-->
<!--            <div slot="content">-->
<!--              <span v-for="(item,index) in scope.row.slice_id.split(',')" :key="index">-->
<!--                {{ item }}<br>-->
<!--              </span>-->
<!--            </div>-->
<!--            <el-button>查看</el-button>-->
<!--          </el-tooltip>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <!--      <el-table-column prop="ext_json" label="扩展信息" align="center" width="150" :show-overflow-tooltip="true" />-->
<!--      <el-table-column prop="customer_business_number" label="客户业务单号" align="center" />-->
<!--      <el-table-column prop="LOT1" label="LOT1" align="center" />-->
<!--      <el-table-column prop="LOT2" label="LOT2" align="center" />
      <el-table-column prop="LOT3" label="LOT3" align="center" />-->

      <el-table-column prop="operator_name" label="操作人（员工）" align="center" width="150" />
      <el-table-column prop="created_at" label="创建时间" align="center" width="150" />
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />

  </div>

</template>

<script>
import { inventoryOperationRecordList, exportInventoryOperationRecord } from '@/api/storehouse'

export default {
  name: 'StockInventoryOperationRecord',
  data() {
    return {
      queryParams: {
        page: 1,
        limit: 10,
        goods_name: undefined,
        warehousing_id: undefined,
        arbitrary_code: undefined,
        created_at: [],
        order_type: undefined
      },
      loading: false,
      list: [],
      total: 0,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      options: [{
        value: '1',
        label: '入库'
      }, {
        value: '2',
        label: '拆箱'
      }, {
        value: '3',
        label: '拆件'
      }, {
        value: '4',
        label: '移库'
      }, {
        value: '5',
        label: '出库'
      }],
      exporting: false
    }
  },
  created() {
    const id = this.$route.query.id
    if (id) {
      this.queryParams.id = id
    }
    this.getList()
  },
  methods: {
    /** 查询列表 */
    async getList() {
      const that = this
      this.loading = true
      try {
        const { data, count, code } = await inventoryOperationRecordList(this.queryParams)
        if (code === 10000) {
          that.list = data
          that.total = count
          that.loading = false
        }
      } catch (err) {
        that.$message.error(err.message)
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        page: 1,
        limit: 10,
        goods_name: undefined,
        arbitrary_code: undefined,
        created_at: [],
        order_type: undefined
      }
      this.handleQuery()
    },
    /** 导出按钮操作 */
    async handleExport() {
      this.exporting = true
      try {
        const response = await exportInventoryOperationRecord(this.queryParams)
        if (response.code === 10000) {
          const url = response.data.url.replace('127.0.0.1:8080', 'cross.qekj.net')
          window.open(url)
          this.$message({
            message: '成功导出文件',
            type: 'success'
          })
        } else {
          this.$message.error(response.message)
        }
      } catch (error) {
        this.$message.error('导出失败，请重试')
      } finally {
        this.exporting = false
      }
    }
  }
}
</script>

<style scoped>

</style>
